<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:th='http://www.thymeleaf.org'>

<body>
<span th:replace="@{banner}"></span>

<div class="container-fluid">
    <span th:replace="@{nav}"></span>

    <div class="wrapper">
        <div class="wrapper_header">
            <button id="addDepartment_trigger" class="btn" type="button">新增</button>
        </div>
        <div style="height: 100%;overflow: auto;padding-bottom: 40px">
            <table id="department_list" class="wrapper_inner  table-bordered">
                <tr>
                    <th>部门名称</th>
                    <th>部门描述</th>
                    <th>修改</th>
                    <th>删除</th>
                </tr>

                <tr class="depart_list_tr" th:if="not ${#lists.isEmpty(departments)}"
                    th:each="department,departmentStat : ${departments}"
                    th:if="${departmentStat.index}<15">
                    <td class="hide" th:text="${department.id}"></td>
                    <td th:text="${department.name}"></td>
                    <td th:text="${department.description}"></td>
                    <td th:onclick="|updateDepartment(this)|">编辑</td>
                    <td th:onclick="|delDepartment(this)|">删除</td>
                </tr>
            </table>
            <div class="pager pull-right"><a class="pre">上一页</a>&nbsp;&nbsp;<span class="cp"></span>/<span
                    class="tp"></span> &nbsp;&nbsp;<a
                    class="next">下一页</a></div>
        </div>

    </div>
</div>


<div class="md-modal" id="addDepartment_modal">
    <span class="md-close" style="position: absolute;right: 10px;top: 10px;cursor: pointer">X</span>
    <div class="md-content">
        <form id="department_form">
            <input name="id" class="hide"/>
            <label>
                <span>部门名称:</span>
                <input name="name" type="text"/>
            </label>
            <label>
                <span>部门描述:</span>
                <input name="description" type="text"/>
            </label>
            <label id="alert" style="color:#fc6423;">
            </label>
            <div class="footer">
                <button class="btn btn-primary" type="button" onclick="addDepartment()">确定</button>
            </div>
        </form>
    </div>
</div>

<script type="text/javascript" th:src="@{/zs/assets/js/myModal.js}"></script>

<script th:inline="javascript">

    var departments = /*[[${departments}]]*/;
    var cPage = 1;

    $(function () {
        var tp = departments.length % 15 > 0 ? Math.floor(departments.length / 15) + 1 : departments.length / 15;
        if (tp == 1) {
            $('.pager').hide();
        }
        else {
            $('.cp').html(cPage);
            $('.tp').html(tp);
        }
    });

    $('.pre').bind('click', function () {
        if (cPage == 1) return;
        --cPage;
        $('.depart_list_tr').remove();
        var content;
        for (var i = (cPage - 1) * 15; i < cPage * 15; i++) {
            content += '<tr class="depart_list_tr">' +
                '<td class="hide">' + departments[i].id + '</td>' +
                '<td>' + departments[i].name + '</td>' +
                '<td>' + departments[i].description + '</td>' +
                '<td onclick = "updateDepartment(this)"> 编辑 </td>' +
                '<td onclick = "delDepartment(this)"> 删除 </td>' +
                '</tr>';
        }
        $('#department_list').append(content);
        console.log(cPage);
    });

    $('.next').bind('click', function () {
        if (cPage * 15 >= departments.length) return;
        $('.depart_list_tr').remove();
        var content;
        for (var i = cPage * 15; i < ((cPage + 1) * 15 > departments.length ? departments.length : (cPage + 1) * 15); i++) {
            content += '<tr class="depart_list_tr">' +
                '<td class="hide">' + departments[i].id + '</td>' +
                '<td>' + departments[i].name + '</td>' +
                '<td>' + departments[i].description + '</td>' +
                '<td onclick = "updateDepartment(this)"> 编辑 </td>' +
                '<td onclick = "delDepartment(this)"> 删除 </td>' +
                '</tr>';
        }
        $('#department_list').append(content);
        ++cPage;
        console.log(cPage);
    });

    var uname;

    $('.system-nav li:eq(1)').addClass('choosed');

    $("#addDepartment_trigger").bind('click', function (e) {
        if ($("#addDepartment_modal").is(":visible")) {
            return;
        }
        else {
            open_modal("addDepartment_modal");
        }
        e.preventDefault();
    });

    function addDepartment() {
        var department = $('#department_form').serializeObject();
        var url;
        if (isEmpty(department.id)) {
            if (isEmpty(department.name)) {
                alert("部门名称不能为空");
                return;
            }
            for (var i = 0; i < departments.length; i++) {
                if (departments[i].name == department.name) {
                    alert("部门名称已存在");
                    return;
                }
            }
            url = "/zs/department/add";
        } else {
            if (isEmpty(department.name)) {
                alert("部门名称不能为空");
                return;
            }
            for (var i = 0; i < departments.length; i++) {
                if (departments[i].name == department.name && department.name != uname) {
                    alert("部门名称已存在");
                    return;
                }
            }
            url = "/zs/department/update";
        }
        $.post(url, department,
            function (data, status) {
                if (status == 'success') {
                    $('#department_form').formReset();
                    window.location.reload();
                } else {
                    alert("添加(修改)失败");
                }
            });
    }

    function delDepartment(el) {
        var a = confirm('确认删除吗?');
        if (a == true) {
            var id = $(el).parent().children().eq(0).text();
            var url = '/zs/department/del/' + id;
            $.post(url, function (data, status) {
                if (status == 'success') {
                    $(el).parent().hide();
                } else {
                    alert("删除失败");
                }
            });
        }
        else return;

    }

    function updateDepartment(el) {
        var childrens = $(el).parent().children();
        $('#department_form').find('input[name=id]').val(childrens.eq(0).text());
        $('#department_form').find('input[name=name]').val(childrens.eq(1).text());
        $('#department_form').find('input[name=description]').val(childrens.eq(2).text());
        uname = childrens.eq(1).text();
        open_modal("addDepartment_modal");
    }

</script>

</body>
</html>